<template>
	<view class="top_header">
		<image :src="`${constInfo.srcConst}/lhhy/tcl/header.png`" style="width: 750rpx" mode="widthFix" class="iamgeFix"></image>
		<view class="top-info">
			<view class="left-image">
				<image :src="`${constInfo.srcConst}/lhhy/tcl/avatar.png`" style="width: 100rpx" mode="widthFix"></image>
			</view>
			<view class="center-info">
				<view class="top-mobile">{{ userInfo?.mobile }}</view>
				<view class="bottom-product">省心联合会员，TCL领取</view>
			</view>
		</view>
		<view class="tabs-list">
			<up-tabs :scrollable="true" :list="list1" @click="click"></up-tabs>
		</view>
	</view>
	<view class="center-list">
		<view class="list-title">
			<up-line color="#a3a3a3" length="50rpx" margin="0rpx 20rpx"></up-line>
			<text>TCL</text>
			<up-line margin="0rpx 20rpx" color="#a3a3a3" length="50rpx"></up-line>
		</view>
		<view class="operate-receive">
			<view class="receive-left">
				<image :src="`${constInfo.srcConst}/lhhy/tcl/vip.png`" style="width: 100rpx" mode="widthFix"></image>
			</view>
			<view class="receive-center">
				<view class="center-name">TCL会员</view>
				<view class="center-month">月卡</view>
			</view>
			<view class="receive-btn">
				<button class="clickBtn" @click="laterTest">立即领取</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import initApi from '@/apis/init.js';
import dayjs from 'dayjs';
import { constStore } from '@/store/const.js';
//引入防抖函数
import { customDebounce } from '@/utils/commo.js';
const { constInfo } = constStore();
const emit = defineEmits(['refrash']);
const props = defineProps({
	header: {
		type: String,
		default: ''
	},
	userInfo: {
		type: Object,
		default: () => {}
	},
	pageParams: {
		type: Object,
		default: () => {}
	}
});
const list1 = reactive([
	{ name: '关注' },
	{ name: '推荐' },
	{ name: '电影' },
	{ name: '科技' },
	{ name: '音乐' },
	{ name: '美食' },
	{ name: '文化' },
	{ name: '财经' },
	{ name: '手工' }
]);
// 定义方法
function click(item) {
	console.log('item', item);
}

//调用
const haveOperate = (item) => {
	/* receiveStatus 领取状态 1 && 当前时间在有效时间范围内 未领取 有操作  
		 receiveStatus 领取状态 1 && 当前时间 早于 生效时间 未到时间  无操作 effectiveTime
		 receiveStatus 领取状态 1 && 当前时间大于过期时间   已过期 无操作 expireTime  */

	const time1 = item.effectiveTime; // 8yue
	const time2 = item.expireTime; // 9yue
	const nowTime = dayjs(new Date()).format('YYYY-MM-DD HH:ss:mm');
	const dayjsTime1 = dayjs(time1);
	const dayjsTime2 = dayjs(time2);
	const dayjsTime3 = dayjs(nowTime);
	if (dayjsTime3.isBefore(dayjsTime1)) {
		return '未到时间';
	} else if (dayjsTime3.isAfter(dayjsTime2)) {
		return '已过期';
	} else if (dayjsTime3.isAfter(dayjsTime1) && dayjsTime3.isBefore(dayjsTime2)) {
		return '未领取';
	} else {
		return '错误时间';
	}
};
// 立即领取
const laterTest = customDebounce(() => {
	//需要防抖执行的逻辑
	let arr = {
		equityDetailId: ''
	};
	// return uni.utils.toast('功能开发中。。。');
	const newList = props.pageParams.list.filter((item) => item.receiveStatus == 1);
	const noReceive = newList.filter((item) => {
		const time1 = item.effectiveTime; // 8yue
		const time2 = item.expireTime; // 9yue
		const nowTime = dayjs(new Date()).format('YYYY-MM-DD HH:ss:mm');
		const dayjsTime1 = dayjs(time1);
		const dayjsTime2 = dayjs(time2);
		const dayjsTime3 = dayjs(nowTime);
		return dayjsTime3.isAfter(dayjsTime1) && dayjsTime3.isBefore(dayjsTime2);
	});
	if (noReceive && noReceive.length > 0) {
		arr.equityDetailId = noReceive[0].id;
		initApi
			.getTclGrantEquity(arr)
			.then((res) => {
				console.log(res);
				if (res.code == 20000) {
					uni.utils.toast('领取成功');
					setTimeout(() => {
						emit('refrash');
					}, 200);
				} else {
					uni.utils.toast(res.message);
					// uni.utils.toast('领取成功');
				}
			})
			.catch((error) => {
				uni.utils.toast('领取失败');
			});
	} else {
		return uni.utils.toast('暂无权益券可领取');
	}
	console.log(noReceive);
}, 200);
</script>

<style scoped lang="scss">
.top_header {
	position: relative;
	.tabs-list {
		position: absolute;
		top: 180rpx;
		left: 50%;
		width: 660rpx;
		transform: translateX(-50%);
	}
	.top-info {
		display: flex;
		position: absolute;
		top: 30rpx;
		height: 120rpx;
		margin: 0 auto;
		left: 50%;
		width: 700rpx;
		transform: translateX(-50%);
		.left-image {
			margin-top: 10rpx;
		}
		.center-info {
			color: #fff;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}

		/* 		.top-info {
			
			}
	 */
	}
}

.center-list {
	// margin-top: 390rpx;
	height: 200rpx;
	.list-title {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.operate-receive {
		.receive-left {
			// line-height: 120rpx;
			margin-top: 15rpx;
			width: 100rpx;
		}
		.receive-center {
			flex-grow: 1;
			margin-left: 50rpx;
			.center-name {
				margin-top: 15rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
			.center-month {
				margin-top: 10rpx;
			}
		}
		.receive-btn {
			width: 200rpx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			.clickBtn {
				width: 170rpx;
				height: 70rpx;
				background-color: #6082ce;
				color: #fff;
				font-size: 24rpx;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		margin: 0 auto;
		margin-top: 10rpx;
		height: 130rpx;
		border-radius: 5rpx;
		display: flex;
		width: 700rpx;
		background-color: #ffffff;
	}
}
</style>
